@extends("admin.layout.main")

@section("content")
    <style>

    </style>
    <div id="app" style="width: 100%">

        <Modal title="添加/编辑" v-model="addModal" @on-ok="addOk">
                <span>
                    简称:
                     <i-input  v-model="edit.manu_name" size="large"></i-input>
                </span>
                <span>
                    编号:
                     <i-input v-model="edit.manu_no" size="large"></i-input>
                </span>
                <span>
                    产品:
                     <i-input v-model="edit.goods_words" size="large"></i-input>
                </span>
                <span>
                    地址:
                     <i-input v-model="edit.address" size="large"></i-input>
                </span>
                <span>
                    一件代发:
                     <i-input v-model="edit.issue" size="large"></i-input>
                </span>
                <span>
                    样品送货上门:
                     <i-input v-model="edit.sample" size="large"></i-input>
                </span>
                <span>
                    支持电子打单:
                     <i-input v-model="edit.comp_oper" size="large"></i-input>
                </span>
                <span>
                    老板电话:
                     <i-input v-model="edit.phone" size="large"></i-input>
                </span>
                <span>
                    是否有发货对接群:
                     <i-input v-model="edit.group" size="large"></i-input>
                </span>
                <span>
                    工厂类型:
                     <i-input v-model="edit.manu_type" size="large"></i-input>
                </span>
                <span>
                    对接沟通人:
                     <i-input v-model="edit.charge_person" size="large"></i-input>
                </span>
        </Modal>

        <Row type="flex" justify="center" align="middle">

            <i-col span="24" >
                <span>
                    厂家名称:
                     <i-input v-model="search.manu_name" style="width:200px"></i-input>
                </span>
                <span>
                     <i-button type="primary"  @click="searchList">搜索</i-button>
                </span>
                <span>
                     <i-button type="primary"  @click="addManu('')">添加</i-button>
                </span>
            </i-col>

        </Row>
        <Row  justify="center" align="middle" >
            <i-col  style="margin-top: 20px;width: 100%">
                <i-table  ref="selection" :data="tableData" :columns="tableColumns" >
                </i-table>
            </i-col>
        </Row>

        <Row type="flex" justify="center" class="code-row-bg">
            <i-col>
                <Page
                        size="small"
                        :total="page.total"
                        :current="page.current"
                        :page-size="page.pageSize"
                        show-total
                        show-elevator
                        @on-change="getList">

                </Page>
            </i-col>
        </Row>



    </div>
    <script src="/js/layer/layer.js"></script>
    <script src="/js/vue.js"></script>
    <script  src="/js/iview.js"></script>
    <script  src="/js/axios.min.js"></script>
    <script src="/js/common.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data(){
                return {
                    token:'',
                    tableColumns: [

                        {
                            title: '内部编号',
                            key: 'manu_no',

                        },
                        {
                            title: '简称',
                            key: 'manu_name',
                        },
                        {
                            title: '产品',
                            key: 'goods_words',

                        },
                        {
                            title: '地址',
                            key: 'address',

                        },
                        {
                            title: '一件代发',
                            key: 'issue',

                        },
                        {
                            title: '样品送货上门',
                            key: 'sample',

                        },
                        {
                            title: '支持电子打单',
                            key: 'comp_oper',

                        },
                        {
                            title: '老板电话',
                            key: 'phone',

                        },
                        {
                            title: '是否有发货对接群',
                            key: 'group',

                        },
                        {
                            title: '工厂类型',
                            key: 'manu_type',

                        },
                        {
                            title: '对接沟通人',
                            key: 'charge_person',

                        },
                        {
                            title: '操作',
                            key: 'option',
                            width: 100,
                            render: (h, params) => {
                                let row = params.row;
                                return h('div', [

                                    h('Button', {
                                        props: {
                                            type: 'primary',
                                            size: 'small',
                                        },
                                        style:{
                                            'margin-left':'5px'
                                        },
                                        on: {
                                            click: () => {
                                                this.addManu(row)
                                            }
                                        }
                                    }, '编辑')

                                ]);
                            }
                        }

                    ],
                    page: {
                        total: 0,
                        current: 1,
                        pageSize: 50,
                    },
                    tableData: [],
                    search:{
                        manu_name:'',
                    },
                    permission_ids:[],
                    origin_permissions:[],
                    addModal:false,
                    edit:{
                        manu_name:'',
                        manu_no:'',
                        goods_words:'',
                        address:'',
                        phone:'',
                        manu_type:'',
                        charge_person:'',
                        issue:'',
                        sample:'',
                        comp_oper:'',
                        group:'',
                        origin_manu_name:'',
                        origin_manu_no:'',
                        manu_type:'',
                    },

                }
            },
            mounted() {
                this.$Message.config({
                    top: 90,
                    duration: 3
                });
            },
            methods:{
                searchList(){
                    this.getList(1);
                },
                getList(page){
                    axios.get('/api/manu/data', {
                        params: {
                            token:vm.token,
                            page: page,
                            manu_name:this.search.manu_name,
                        }
                    }).then((response) => {
                        vm.tableData = response.data;
                       // vm.page.total = response.data.total;
                    })
                },
                addManu(row){
                    this.addModal = true;
                    this.edit.manu_name =    '';
                    this.edit.manu_no =    '';
                    this.edit.goods_words =    '';
                    this.edit.address =    '';
                    this.edit.phone =    '';
                    this.edit.manu_type =    '';
                    this.edit.charge_person =    '';
                    this.edit.issue =    '';
                    this.edit.sample =    '';
                    this.edit.comp_oper =    '';
                    this.edit.group =    '';
                    this.edit.type = 'add';
                    if(row){
                        this.edit.origin_manu_name = row.manu_name;
                        this.edit.origin_manu_no = row.manu_no;
                        this.edit.type = 'edit';
                            this.edit.manu_name =    row.manu_name;
                            this.edit.manu_no =    row.manu_no;
                            this.edit.goods_words =    row.goods_words;
                            this.edit.address =    row.address;
                            this.edit.phone =    row.phone;
                            this.edit.manu_type =    row.manu_type;
                            this.edit.charge_person =   row.charge_person;
                            this.edit.issue =    row.issue;
                            this.edit.sample =   row.sample;
                            this.edit.comp_oper =    row.comp_oper;
                            this.edit.group =    row.group;
                    }
                },
                addOk(){

                    if(this.edit.manu_no == ''){
                        this.$Message.error('请填写简称');
                        return;
                    }
                    axios.post('/admin/manu/store', {
                            token:vm.token,
                            data:this.edit
                    }).then((response) => {
                        vm.$Message.success('添加成功');
                        vm.getList(1);
                    })

                }


            }


        });

        vm.token = getToken();
        //vm.permissionList();
        vm.getList(1);
    </script>

@endsection

